<template>
  <div class="page-wrap1">
    <Head title="方案信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm"
          :detail="data.detailData"
          :labelWidth="120"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="电站价格设置">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm1"
          :detail="data.detailData"
          :labelWidth="120"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="开放电站">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm2"
          :detail="data.detailData"
          :labelWidth="120"
          align="left"
        ></Detail>
      </template>
    </Head>
  </div>
</template>
 
<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import { getPlan } from '@/service/apis/docking';
import { queryDicByParent } from '@/service/apis/api';

const route = useRoute();
const {
  query: { id },
} = route;

const data = reactive({
  detailData: {} as any,
});

queryDicByParent({
  listDtos: ['planPriceType', 'planOpenStationType'],
}).then((res: any) => {
  detailForm1[2].dic = [...res.planPriceType];
  detailForm1[3].dic = [...res.planPriceType];
  detailForm2[0].dic = [...res.planOpenStationType];
});


const detailForm = reactive([
  {
    label: '方案名称',
    prop: 'planName',
  },
  {
    label: '流量方',
    prop: 'orgName',
  },
  {
    label: '生效时间',
    prop: 'startTime',
    template: (row: any) => {
      return `${row.startTime}~${row.endTime}`;
    },
  },
]);

const detailForm1 = reactive([
  {
    label: '价格设置（商务价）',
    prop: 'chargeDiscount',
    template: (row: any) => {
      return `电费折扣${row.chargeDiscount}%`;
    },
  },
  {
    label: '',
    prop: 'serviceDiscount',
    template: (row: any) => {
      return `服务费折扣${row.serviceDiscount}%`;
    },
  },
  {
    label: '站点推送价格',
    prop: 'stationPriceType',
    dic: [] as any,
  },
  {
    label: '结算推送价格',
    prop: 'settlePriceType',
    dic: [] as any,
  },
]);

const detailForm2 = reactive([
  {
    label: '提供方',
    prop: 'openStationType',
    comName: 'checkbox',
    dic: [] as any,
  },
  {
    label: '选择运营商',
    prop: 'orgTrees',
    comName: 'tree',
    dic: [] as any,
  },
  {
    label: '选择电站',
    prop: 'stationTrees',
    comName: 'tree',
    dic: [] as any,
  },
]);

getPlan({ id }).then((res: any) => {
  if (res) {
    data.detailData = res;
      detailForm2[1].dic = res.orgTrees;
      detailForm2[2].dic = res.stationTrees;
  }
});
</script>
